
 
<template>
    <div class="epidemicRisk_areas" id="container">

    </div>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    methods:{
        init(){
            $.get('https://a.amap.com/Loca/static/mock/tourist_attractions.csv', function (data) {
        var map = new AMap.Map('container', {
            mapStyle: 'amap://styles/db9efe6a1745ac24b7269b862f359536',
            pitch: 50,
            features: ['bg', 'road'],
            center: [107.4976, 32.1697],
            zoom: 4,
            viewMode: '3D'
        });

        var layer = new Loca.DistrictLayer({
            fitView: true,
            eventSupport: true,
            drillDown: true,    // 开启鼠标单击下钻功能，前提要求开启 eventSupport 配置来支持鼠标事件
            map: map
        });

        layer.setData(data, {
            type: 'csv',
            lnglat: '经纬度',
            value: '省内5A景区数量'
        });

        layer.setOptions({
            mode: 'count',
            // 是否显示无数据区域，v1.1.1 开始支持
            displayBlank: true,
            style: {
                color: ['rgba(255,0,0, 0.1)', 'rgba(255,0,0, 0.2)', 'rgba(255,0,0, 0.3)', 'rgba(255,0,0, 0.4)', 'rgba(255,0,0, 0.5)', 'rgba(255,0,0, 0.7)', 'rgba(255,0,0, 0.9)'],
                // 无数据区域的颜色填充
                //blankFill: '#e3e3e3'
            },
            selectStyle:false
        });

        layer.render();

        $('#up-btn').click(function () {
            layer.goto(-1);
        });

        $('#code-list').change(function (ev) {
            var target = ev.target;
            var adcode = $(target).val();
            if (adcode != -1) {
                layer.goto(adcode);
            }
        });

    });
        }
    },
    created(){

    },
    mounted(){
        this.init()
    }
}
</script>
<style scoped>
    .epidemicRisk_areas{
        height: 660px;
    }
</style>
